<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="js/lib/bootstrap/bootstrap.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/font-awesome/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="css/ionicons/ionicons.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/AdminLTE.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="css/skins/skin-luger.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="js/lib/html5shiv/html5shiv.js"></script>
  <script src="js/lib/respond/respond.js"></script>
  <![endif]-->
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Alexander Pierce</p>
          <!-- Status -->
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>

      <!-- search form (Optional) -->
      <div class="sidebar-form">
        <div id="menu-search-group" class="input-group">
          <input type="text" name="q" class="form-control" id="menu-search" placeholder="Search...">
          <ul id="menu-search-tips" class="dropdown-menu J_menuItems">
          </ul>
          <span id="menu-search-group-btn" class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
            </button>
          </span>
        </div>

      </div>
      <!-- /.search form -->

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu J_menuItems">
        <li class="header">HEADER</li>
        <!-- Optionally, you can add icons to the links -->
        <li class="active"><a href="http://www.baidu.com" class="J_menuItem"><i class="fa fa-link"></i> <span>首页</span></a></li>
        <li><a href="http://www.kuwo.cn" class="J_menuItem"><i class="fa fa-link"></i> <span>百度</span></a></li>
        <li><a href="http://www.ipc.me" class="J_menuItem"><i class="fa fa-link"></i> <span>IPC</span></a></li>
        <li><a href="http://www.baidu.cn" class="J_menuItem"><i class="fa fa-link"></i> <span>百度CN</span></a></li>
        <li class="treeview">
          <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" class="J_menuItem">Link in level 2</a></li>
            <li>
              <a href="#">
                  <span>Multilevel</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
                <ul class="treeview-menu">
                    <li><a href="#" class="J_menuItem">Link in level 2</a></li>
                </ul>
            </li>
            <li><a href="#" class="J_menuItem">Link in level 2</a></li>
          </ul>
        </li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>Link</span></a></li>
        <li><a href="#" class="J_menuItem"><i class="fa fa-link"></i> <span>luger end</span></a></li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <header class="main-header">
      <!-- Header Navbar -->
      <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
          <span class="sr-only">Toggle navigation</span>
        </a>
        <!--Sidebar search-->
        <!--<div class="nav-search">-->
          <!--<input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">-->
        <!--</div>-->
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <!-- Messages: style can be found in dropdown.less-->
            <li class="dropdown messages-menu">
              <!-- Menu toggle button -->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-envelope-o"></i>
                <span class="label label-success">4</span>
              </a>
              <ul class="dropdown-menu">
                <li class="header">You have 4 messages</li>
                <li>
                  <!-- inner menu: contains the messages -->
                  <ul class="menu">
                    <li><!-- start message -->
                      <a href="#">
                        <div class="pull-left">
                          <!-- User Image -->
                          <img src="img/user2-160x160.jpg" class="img-circle" alt="User Image">
                        </div>
                        <!-- Message title and timestamp -->
                        <h4>
                          Support Team
                          <small><i class="fa fa-clock-o"></i> 5 mins</small>
                        </h4>
                        <!-- The message -->
                        <p>Why not buy a new awesome theme?</p>
                      </a>
                    </li>
                    <!-- end message -->
                  </ul>
                  <!-- /.menu -->
                </li>
                <li class="footer"><a href="#">See All Messages</a></li>
              </ul>
            </li>
            <!-- /.messages-menu -->

            <!-- Notifications Menu -->
            <li class="dropdown notifications-menu">
              <!-- Menu toggle button -->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-bell-o"></i>
                <span class="label label-warning">10</span>
              </a>
              <ul class="dropdown-menu">
                <li class="header">You have 10 notifications</li>
                <li>
                  <!-- Inner Menu: contains the notifications -->
                  <ul class="menu">
                    <li><!-- start notification -->
                      <a href="#">
                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
                      </a>
                    </li>
                    <!-- end notification -->
                  </ul>
                </li>
                <li class="footer"><a href="#">View all</a></li>
              </ul>
            </li>
            <!-- Tasks Menu -->
            <li class="dropdown tasks-menu">
              <!-- Menu Toggle Button -->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-flag-o"></i>
                <span class="label label-danger">9</span>
              </a>
              <ul class="dropdown-menu">
                <li class="header">You have 9 tasks</li>
                <li>
                  <!-- Inner menu: contains the tasks -->
                  <ul class="menu">
                    <li><!-- Task item -->
                      <a href="#">
                        <!-- Task title and progress text -->
                        <h3>
                          Design some buttons
                          <small class="pull-right">20%</small>
                        </h3>
                        <!-- The progress bar -->
                        <div class="progress xs">
                          <!-- Change the css width attribute to simulate progress -->
                          <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                            <span class="sr-only">20% Complete</span>
                          </div>
                        </div>
                      </a>
                    </li>
                    <!-- end task item -->
                  </ul>
                </li>
                <li class="footer">
                  <a href="#">View all tasks</a>
                </li>
              </ul>
            </li>
            <!-- User Account Menu -->
            <li class="dropdown user user-menu">
              <!-- Menu Toggle Button -->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <!-- The user image in the navbar-->
                <img src="img/user2-160x160.jpg" class="user-image" alt="User Image">
                <!-- hidden-xs hides the username on small devices so only the image appears. -->
                <span class="hidden-xs">Alexander Pierce</span>
              </a>
              <ul class="dropdown-menu">
                <!-- The user image in the menu -->
                <li class="user-header">
                  <img src="img/user2-160x160.jpg" class="img-circle" alt="User Image">

                  <p>
                    Alexander Pierce - Web Developer
                    <small>Member since Nov. 2012</small>
                  </p>
                </li>
                <!-- Menu Body -->
                <li class="user-body">
                  <div class="row">
                    <div class="col-xs-4 text-center">
                      <a href="#">Followers</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Sales</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Friends</a>
                    </div>
                  </div>
                  <!-- /.row -->
                </li>
                <!-- Menu Footer-->
                <li class="user-footer">
                  <div class="pull-left">
                    <a href="#" class="btn btn-default btn-flat">Profile</a>
                  </div>
                  <div class="pull-right">
                    <a href="#" class="btn btn-default btn-flat">Sign out</a>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Control Sidebar Toggle Button -->
            <li>
              <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <div class="row content-tabs">
      <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
      </button>
      <nav class="page-tabs J_menuTabs">
        <div class="page-tabs-content" style="margin-left: 0px;">
          <a href="javascript:;" class="J_menuTab active" data-id="http://www.baidu.com">首页<i class="fa fa-times-circle"></i></a></div>
      </nav>
      <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
      </button>
      <div class="btn-group roll-nav roll-right">
        <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>

        </button>
        <ul role="menu" class="dropdown-menu dropdown-menu-right">
          <li class="J_tabShowActive"><a>定位当前选项卡</a>
          </li>
          <li class="divider"></li>
          <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
          </li>
          <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
          </li>
        </ul>
      </div>
      <a href="login.html" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
    </div>
    <!-- Content Header (Page header) -->
    <!--<section class="content-header">-->
      <!--<h1>-->
        <!--Page Header-->
        <!--<small>Optional description</small>-->
      <!--</h1>-->
      <!--<ol class="breadcrumb">-->
        <!--<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>-->
        <!--<li class="active">Here</li>-->
      <!--</ol>-->
    <!--</section>-->

    <!-- Main content -->
    <section class="content J_mainContent">
      <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="http://www.zi-han.net/theme/hplus/form_validate.html" frameborder="0" data-id="http://www.baidu.com" seamless=""></iframe>
    </section>
    <!-- /.content -->
    <!-- Main Footer -->
    <footer class="main-footer">
      <!-- To the right -->
      <div class="pull-right hidden-xs">
        Anything you want
      </div>
      <!-- Default to the left -->
      <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript::;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript::;">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="pull-right-container">
                  <span class="label label-danger pull-right">70%</span>
                </span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="js/lib/jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="js/lib/bootstrap/bootstrap.js"></script>
<!-- slimscroll 1.3.8-->
<script src="js/lib/slimscroll/jquery.slimscroll.js"></script>
<!-- AdminLTE App -->
<script src="js/app.js"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
</body>
</html>
